<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-左侧导航</title>
    <script src="js/dom.js"></script>
</head>
<body>
<ul id="nav">

</ul>
</body>
<script>

    var nav = document.getElementById('nav');

    for(var key in menus){

        var listItem = document.createElement('li');
        listItem.innerText = menus[key].title;
        listItem.onclick=function(){
            /*实现显示-隐藏切换*/
            this.children[0].style.display = 'none';
        }
        nav.appendChild(listItem);

        if(menus[key].children){
            var innerList = document.createElement('ul');
            for(var key2 in menus[key].children){
                var innerItem = document.createElement('li');
                innerItem.innerText = menus[key].children[key2].title;
                innerList.appendChild(innerItem);
            }
            listItem.appendChild(innerList);
        }

    }

</script>
</html>